import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import ChartsConfig from '../../../config/ChartsConfig';
import ChartStore from '../../../stores/ChartStore';
import './Chart.scss';
import { DeleteBtn } from './Delete';
import { RangeTabs } from './RangeTabs';
import { ChartLine } from './ChartLine';
import { Layout, Menu } from 'antd';
import StatisticStore from '../../../stores/StatisticStore';
import icons from '../../../images/chartImages';
import { OptionType } from '../../../models/ChartModels';
import { StrategiesMap, StrategyLineList } from '../../../services/StatisticService';
import eventBus from '../../../utils/eventBus';

const { Sider } = Layout;
const { SubMenu } = Menu;

export const Charts = observer(() => {
  useEffect(() => {
    ChartStore.paintChart(false);
  }, [])
  var optionList = ChartsConfig.basicOptions.map((tab, idx) => {
    
    if (tab.id === 6) {
      return <DeleteBtn key={55} />
    }
    if (tab.id === 3) {
      return <ChartLine key={333} />
    }
    var icon = ChartStore.iconMap[tab.id];
    return (
      <li key={idx} onClick={(e) => {
        if (tab.id == 1) {
          var style = document.createElement("style");
          style.setAttribute("id", 'pop');
          style.type = "text/css";
          style.innerHTML = ".highcharts-popup{width: 50%;}"
          var head = document.getElementsByTagName("head")[0];
          head.appendChild(style);
          var flutter_inappwebview = (window as any).flutter_inappwebview;
          if (flutter_inappwebview) {
            flutter_inappwebview.callHandler('showFull');
          }
          eventBus.emit('fullScreen', true);
                    ChartStore.fullScreen = true;
          return;
        }
        ChartStore.setCurrentOption(tab.id)
      }} className={(tab.type || '') + ' chart-nav'} title="Simple shapes">
        <img alt='' className="highcharts-menu-item-btn" src={icon}></img>
         <ul className="chart-menu" id={`optionMenu${tab.id}`}>
          {tab.options.map((option, i) => (
            <li key={i} className={option.type} title={option.label} onClick={(e) => {
              ChartStore.onTypePicked(tab.id, option.icon, option.type);
            }} >
              <img alt='' className="highcharts-menu-item-btn" src={option.icon}></img>
            </li>
          ))}
        </ul>
      </li>
    );
  });
  // optionList.push(<ZoomInBtn />);
  optionList.push(<div key='clear' className="clear"></div>);
  const [collapsed, onCollapse] = useState(true,);
  return (
    <div className="chart-component" >
      <div className="chart-wrapper">
        <div className="containerWrapper">
          <div className="lines">
            <Sider collapsible={false} collapsed={collapsed} onCollapse={() => onCollapse(!collapsed)}>
              <div className="title" >技术图形</div>
              <Menu mode="inline">
                {StatisticStore.strategyLines.map((l, idx) => <SubMenu key={idx} icon={
                  <div className='content'>
                    <img className="strategyImg" src={StrategiesMap[l.strategy_name]['icon']} alt='' />
                    <div className="name">{StrategiesMap[l.strategy_name]['name']}</div>
                  </div>
                }>
                  {l.strategies.map((s, _idx) => <Menu.Item key={_idx} onClick={() => {
                    if (StrategyLineList.indexOf(l.strategy_name) > -1) {
                      ChartsConfig.seriesType = 'line';
                      ChartStore.onTypePicked(3, icons.series_line, OptionType.seriesLine);
                  } else {
                      ChartsConfig.seriesType = 'candlestick';
                      ChartStore.onTypePicked(3, icons.series_candlestick, OptionType.seriesCandlestick);
                  }
                  ChartStore.addAnnotation(s, idx+_idx);
                  }}>{s.begin_date}~{s.end_date}</Menu.Item>)}
                </SubMenu>
                )}
              </Menu>
            </Sider>
          </div>
          <div className="chartContainer">
            <div className="tools-wrapper">
              <div className="highcharts-stocktools-wrapper highcharts-bindings-container highcharts-bindings-wrapper">
                <div className="highcharts-menu-wrapper">
                  <ul className="highcharts-stocktools-toolbar stocktools-toolbar">
                    {optionList}
                  </ul>
                </div>
              </div>
            </div>
            <div className="tabToolsWrapper">

              <RangeTabs />
              <div className="resetBtn" onClick={() => {
                if (ChartStore.annotationRange.length > 0) {
                  ChartStore.annotationRange = [];
                  ChartStore.changeRangeTab(1, 0);
                } else {
                  ChartStore.setRange();
                }
              }}>
                重置缩放
              </div>
            </div>
            <div id="container" className="chart"></div>
          </div>

        </div>
      </div>
    </div>
  );
})